<template>
    <ModalContent
        @close="onClose"
        :show="!hide"
        :mounted="isMounted"
        :top="comList[type]?.top"
        :right="comList[type]?.right"
        :left="comList[type]?.left"
        :bottom="comList[type]?.bottom"
    >
        <component
            :is="componentName"
            :data="data"
            v-if="isMounted"
            style="min-width: 260px; min-height: 200px; padding: 8px 12px;"
        />
    </ModalContent>
</template>
<script setup>
import { ref, computed, toRefs, watch, nextTick } from "vue";
import ModalContent from "./ModalContent.vue";
import { delay } from "lodash";

const props = defineProps({
    type: {
        type: [Object, String, Number],
        default: () => null,
    },
    data: {
        default: () => null,
    },
    components: {
        type: Object,
        default: () => {},
    },
    comList: {
        type: Object,
        default: () => {},
    },
});

const { type, data } = toRefs(props);

const hide = ref(false);
const isMounted = ref(false);

const componentName = computed(() => {
    const { components, comList } = props;
    if (!type.value) return null;
    if (!comList[type.value]) return null;
    return components[comList[type.value].name];
});

watch(type, async (newVal) => {
    if (!newVal) {
        onClose();
        return;
    }
    if (isMounted.value) {
        hide.value = true;
        isMounted.value = false;
        await nextTick()
        showSlot();
    } else {
        showSlot();
    }
});

const emits = defineEmits(["update:type", "update:data"]);

const showSlot = () => {
    isMounted.value = true;
    hide.value = false;
};

//点击关闭按钮
const onClose = () => {
    hide.value = true;
    setTimeout(() => {
        isMounted.value = false;
        emits("update:type", null);
        emits("update:data", null);
    }, 150);
};

defineExpose({
    onClose
})
</script>
